<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">


<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

</head>
<body>

<fieldset class="layui-elem-field layui-field-title layui-elem-field site-demo-button"   style="margin-top: 30px;">

    <legend>出差日志</legend>
    

</fieldset>


<ul th:if="${data[0].time == null}" class="layui-timeline" >
    <li   class="layui-timeline-item" >
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title"  id="timeh3" >[[${#dates.format(data[0].travelApplication.planTravelDate,'yyyy-MM-dd')}]]</h3>
            <p >
            <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">

                <button data-method="notice" class="layui-btn">添加日志</button>

            </div>
            </p>
        </div>
    </li>
</ul>


<ul th:unless="${data[0].time == null}" class="layui-timeline" >
    <li th:each="dept, deptStat:${data}" th:if=" ${deptStat.index == 0 || #dates.format(dept.time,'yyyy-MM-dd') != #dates.format(data[deptStat.index-1].time, 'yyyy-MM-dd')}"  class="layui-timeline-item" >
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title"  >[[${#dates.format(dept.time,'yyyy-MM-dd')}]]</h3>
            <input type="hidden" th:id="${deptStat.last}?'even':'odd'" th:value="${#dates.format(dept.time,'yyyy-MM-dd')}" >
            <p >
            <div th:each="det:${data}" th:if="${#dates.format(dept.time,'yyyy-MM-dd') == #dates.format(det.time, 'yyyy-MM-dd')}" class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
            &emsp;&emsp;[[${#dates.format(det.time,'HH:mm:ss')}]]:
            <br>
            &emsp;&emsp;&emsp;&emsp;[[${det.content}]]
            </div>
            </p>
        </div>
    </li>
    <li   class="layui-timeline-item" >
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title"   ></h3>
            <p >
            <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">

                <button data-method="notice" class="layui-btn">添加日志</button>

            </div>
            </p>
        </div>
    </li>


</ul>
<script>
</script>
<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline="javascript">
    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //触发事件
        var active = {
            setTop: function(){
                var that = this;
                //多窗口模式，层叠置顶

            }
            ,notice: function(){
                //示范一个公告层
                layer.prompt({
                    formType: 2,
                    value: '',
                    title: '请输入日志',
                    area: ['800px', '350px'], //自定义文本域宽高
                    btn: ['提交', '取消'],
                    yes:function (index,layero) {
                        var value = layero.find(".layui-layer-input").val();

                        $.ajax({
                            url:"/approve/saveLog",
                            type:"post",
                            data: {'id':[[${data[0].travelApplication.id}]],'value':value,'draftBox':1},
                            success:function (data) {
                                window.location.reload([bForceGet=true]);
                            }
                        })
                        layer.close(index);
                    },
                    btn2:function (index,layero) {
                        var value = layero.find(".layui-layer-input").val();

                        $.ajax({
                            url: "approve/saveLog",
                            type:"post",
                            data: {'id':[[${data[0].travelApplication.id}]],'value':value,'draftBox':0},
                            success:function (data) {
                                window.location.href="/approve/travelLog?id="+id;
                            }
                        })

                        layer.close(index);
                    }
                });

            }
        };

        $('#layerDemo .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });




        $("#draftBox").click(function () {
            window.location.href="/approve/toDraftBox?id="+[[${data[0].travelApplication.id}]];
        });
    });

</script>


</body>
</html>